I have encountered an little "problem" with my html/css. Until now, I have been using photoshop to design my web-pages, and I sliced them with the slice tool. Subsequently, I use all the slided parts as divs with background-images. Apparently this is not a good method anymore (as I understand), so my question is as following: What is the best method at the moment?
In advance, thank you.
I'm not sure when that method was ever the right method to use. It certainly was taught, but I don't think any serious developers would use it.
Fundamentally you must be thinking of a web page that can display on multiple viewport sizes, so it never has been as simple as "slice up an image". Nothing wrong with using Photoshop to design the images, but you need backgrounds that are flexible with the viewport size, you need images where appropriate, you need to lay out text over it all, etc. So design your page to be responsive, and figure out how your images will work in that environment. Then lay out your page with standard flow, and insert the text, background and images where they belong, then style it with css.
Web design (or designing a website) is more than just designing an image and slicing it up. It should actually start with the content, and the concept on how to present that content in a meaningful and engaging way. The word “meaningful” says all, as that’s what semantic HTML (https://en.wikipedia.org/wiki/Semantic_HTML) really means. The actual graphical design should be done in such a way that it gets out of the way of the content, i. e. it should adapt to the content and not be more important than the content. As any tool, a slicing tool can only be as good and useful as the person using it; no tool can determine what’s important and what has which meaning.
So, in conclusion: To develop your workflow you might want to start out with simple flat colors at first, i. e. create a color scheme and then use those colors on your site. If that creates something worth looking at you can start adding more advanced graphics for decoration. But perhaps in the course of development you’ll realize that you don’t even need to get more advanced as simple might do the job just fine.
Greetings,
Thank you (both) for replying, yes you're totaly right about the Responsive web-page. That's why I started thinking about other ways (instead of psd->html). So actually; I have to use CSS3 completely to design my web-page, haven't I?
In advance, thank you.
You don’t have to but CSS 3 allows you to do without images in some cases (such as for gradients or shadows) which can increase the page loading time and decrease the amount of data that needs to be transferred. Not everything can be done with CSS 3, though; it depends on your project. If you show an example we might be able to give you some hints on the right approach.
Experiment with some frameworks and focus on a mobile-first approach. It's a bit daunting at first if you're used to developing/designing for desktops, but with time you'll reverse your thinking. Mess around with Foundation and Bootstrap frameworks when you can. Learn SASS and LESS as well. There is also the Skeleton framework, but I avoid it (I think most good developers do). It's not as responsive as Foundation and Bootstrap and doesn't have as many features. You'll figure out your own style. I used to follow the Adobe Workflow a long while ago like you, but I morphed it into my own mobile-first workflow. Lastly, I don't use the Photoshop slicing anymore at all. Foundation framework is my preferred. Good luck.
You don’t have to but CSS 3 allows you to do without images in some cases (such as for gradients or shadows) which can increase the page loading time and decrease the amount of data that needs to be transferred. Not everything can be done with CSS 3, though; it depends on your project. If you show an example we might be able to give you some hints on the right approach.
This is an example of one of my projects (at the moment):